<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="账号名称">
          <el-input v-model="formInline.roleName" placeholder="" style="width: 180px" clearable />
        </el-form-item>
        <el-form-item label="账号权限">
          <el-input v-model="formInline.roleKey" placeholder="" style="width: 180px" clearable />
        </el-form-item>
        <el-form-item>
          <el-form-item label="账号状态">
            <el-select v-model="formInline.status" placeholder="" style="width: 180px" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="医院名称">
            <el-select v-model="formInline.hospitalId" placeholder="" style="width: 180px" clearable>
              <el-option v-for="item in yyoptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchbutton">搜索</el-button>
          <el-button type="primary" @click="addbutton">新增</el-button>
          <el-button type="primary" @click="xgbutton">修改</el-button>
          <el-button type="primary" @click="deletebutton">删除</el-button>
          <el-button type="primary" v-if="useInfoId.userId == 1" @click="xgpasswordbutton">重置密码</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist" border max-height="500" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="nickName" label="姓名" />
          <el-table-column prop="userName" label="手机号" />
          <el-table-column prop="email" label="用户邮箱" />
          <el-table-column prop="hospitalName" label="医院" />
          <el-table-column prop="address" label="账号状态">
            <template #default="scope">
              <span type="primary">正常</span>
              <span type="warning">停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
        <div class="fybox">
          <el-pagination
            v-model:current-page="formInline.pageNum"
            v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager"
            :total="pagetotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="账号详情" width="600" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef" :rules="rules">
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="ruleForm.nickName" />
        </el-form-item>
        <el-form-item label="手机号" prop="userName">
          <el-input v-model="ruleForm.userName" />
        </el-form-item>

        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="医院名称" prop="hospitalId">
          <el-select v-model="ruleForm.hospitalId">
            <el-option v-for="item in yyoptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="xgstatus == false">
          <el-input v-model="ruleForm.password" />
        </el-form-item>

        <el-form-item label="账号状态" prop="status">
          <el-select v-model="ruleForm.status" placeholder="" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="角色组" prop="roleIds">
          <el-select v-model="ruleForm.roleIds" multiple>
            <el-option v-for="item in jueselist" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
          </el-select>
        </el-form-item>

        <el-form-item label="项目组" prop="tbChiefTeamIds">
          <el-select v-model="ruleForm.tbChiefTeamIds" multiple>
            <el-option v-for="item in xmzlist" :key="item.id" :label="item.projectName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetFormone(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisibletwo" title="账号详情" width="600" :before-close="handleClosetwo">
      <el-form :model="ruleFormtwo" label-width="auto" ref="ruleFormRef">
        <el-form-item label="用户账号" prop="userName">
          <el-input v-model="ruleFormtwo.userName" :disabled="true" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleFormtwo.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm()">取消</el-button>
          <el-button type="primary" @click="savemmbutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getxmzApi,
  seekdataApi,
  getjueseApi,
  getyhApi,
  adduserApi,
  getInfoApi,
  xgyhApi,
  deldeyh,
  Passwordmange
} from "@/api/system/system.js";
import authMenuList from "@/assets/json/authMenuList.json";
const useInfoId = ref(JSON.parse(sessionStorage.getItem("useInfo")));
const formInline = ref({
  roleName: "",
  roleKey: "",
  status: "",
  pageNum: 1,
  pageSize: 10
});
const treeFilterData = ref([]);
treeFilterData.value = authMenuList.data;
let xblist = ref([]);
function changeTreeFilter() {}
let dialogVisible = ref(false);
let dialogVisibletwo = ref(false);
let datalist = ref([]);
const xmzlist = ref([]);
const yylist = ref([]);
const jueselist = ref([]);
const yyoptions = ref([]);
const YZlist = JSON.parse(sessionStorage.getItem("YZlist"));
yyoptions.value = YZlist.sys_hospital_name;
const ruleFormRef = ref();
const rules = reactive({
  userName: [
    {
      required: true,
      message: "请输入用户账号",
      trigger: "blur"
    }
  ],
  nickName: [
    {
      required: true,
      message: "请输入用户昵称",
      trigger: "blur"
    }
  ],
  email: [
    {
      required: true,
      message: "请输入用户邮箱",
      trigger: "blur"
    }
  ],
  phonenumber: [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur"
    }
  ],
  sex: [
    {
      required: true,
      message: "请输入用户性别",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    }
  ],
  status: [
    {
      required: true,
      message: "请选择账号状态",
      trigger: "change"
    }
  ],
  remark: [
    {
      required: true,
      message: "请填写备注",
      trigger: "blur"
    }
  ],
  roleIds: [
    {
      required: true,
      message: "请选择角色组",
      trigger: "change"
    }
  ],
  tbChiefTeamIds: [
    {
      required: true,
      message: "请选择项目组",
      trigger: "change"
    }
  ],
  hospitalId: [
    {
      required: true,
      message: "请选择医院",
      trigger: "change"
    }
  ]
});
let ruleForm = ref({
  userName: "",
  nickName: "",
  email: "",
  phonenumber: "",
  sex: "",
  password: "",
  status: "0",
  remark: ""
});
let ruleFormtwo = ref({
  userId: "", //用户ID
  password: "", //密码
  userName: "" //用户账号1234
});
const options = [
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "停用"
  }
];

let handleSizeChange = () => {
  getlist();
};
let handleCurrentChange = () => {
  getlist();
};
const resetForm = formEl => {
  dialogVisibletwo.value = false;
};
const resetFormone = () => {
  dialogVisible.value = false;
};
const searchbutton = () => {
  getlist();
};
const handleClose = done => {
  dialogVisible.value = false;
};
const handleClosetwo = () => {
  dialogVisibletwo.value = false;
};
const addbutton = () => {
  ruleForm.value = {
    userName: "",
    nickName: "",
    email: "",
    phonenumber: "",
    sex: "",
    password: "",
    status: "0",
    remark: ""
  };
  xgstatus.value = true;
  xgstatus.value = false;
  dialogVisible.value = true;
};
const xgbutton = () => {
  if (selection.value.length == 1) {
    getInfoApi({
      userId: selection.value[0].userId
    }).then(res => {
      dialogVisible.value = true;
      // ruleForm.value = res.data;
      ruleForm.value.roleIds = res.roleIds;
      ruleForm.value.tbChiefTeamIds = res.tbChiefTeamIds;
      ruleForm.value.userName = res.data.userName;
      ruleForm.value.nickName = res.data.nickName;
      ruleForm.value.email = res.data.email;
      ruleForm.value.phonenumber = res.data.phonenumber;
      ruleForm.value.sex = res.data.sex;
      ruleForm.value.status = res.data.status;
      ruleForm.value.remark = res.data.remark;
      ruleForm.value.userId = res.data.userId;
      xgstatus.value = true;
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const deletebutton = () => {
  if (selection.value.length == 1) {
    ElMessageBox.confirm("确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deldeyh({
        e: selection.value[0].userId
      }).then(res => {
        ElMessage({
          type: "success",
          message: `${res.msg}`
        });
        getlist();
      });
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const xgpasswordbutton = () => {
  if (selection.value.length == 1) {
    ruleFormtwo.value.userId = selection.value[0].userId;
    ruleFormtwo.value.userName = selection.value[0].userName;
    dialogVisibletwo.value = true;
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
let xgstatus = ref(false);
function savebutton(formEl) {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      //修改
      if (xgstatus.value == true) {
        delete ruleForm.value.password;
        xgyhApi(ruleForm.value).then(() => {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          xgstatus.value = false;
          //刷新列表数据
          getlist();
        });
      } else {
        //新增
        adduserApi(ruleForm.value).then(() => {
          ElMessage({
            message: "新增成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          getlist();
        });
      }
    } else {
      return false;
    }
  });
}
const savemmbutton = () => {
  Passwordmange({
    userId: ruleFormtwo.value.userId,
    password: ruleFormtwo.value.password
  }).then(res => {
    if (res.code) {
      ElMessage({
        message: "修改成功",
        type: "success"
      });
      dialogVisibletwo.value = false;
      ruleFormtwo.value = {};
      getlist();
    }
  });
};
getYZlsit();
getlist();
function getYZlsit() {
  getxmzApi().then(res => {
    xmzlist.value = res.data;
  });
  getjueseApi().then(res => {
    jueselist.value = res.data;
  });
  seekdataApi({ dictType: "sys_user_sex" }).then(res => {
    xblist.value = res.data.map(item => ({
      value: item.dictValue,
      label: item.dictLabel
    }));
  });
}
let pagetotal = ref(0);

// 获取字典列表
function getlist() {
  getyhApi({
    pageNum: formInline.value.pageNum,
    pageSize: formInline.value.pageSize,
    roleName: formInline.value.roleName,
    roleKey: formInline.value.roleKey,
    status: formInline.value.status,
    hospitalId: formInline.value.hospitalId,
    beginTime: "",
    endTime: ""
  }).then(res => {
    datalist.value = res.rows;
    pagetotal.value = res.total;
  });
}
function gettreelist(val) {
  ruleForm.value.menuIds = val;
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409eff;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
